import type { Node, Layout, ComponentTree } from 'src/stores/modules/NodeTree.ts';
/**
 * 计算旋转后的布局信息
 * 该函数用于根据给定的布局信息和旋转角度，计算旋转后的布局应如何调整
 * 主要解决了在旋转界面元素时，如何保持元素在视觉上居中的问题
 *
 * @param layout 原始的布局信息，包括元素的宽度、高度、旋转角度以及元素的坐标位置
 * @returns 返回一个新的布局对象，包含了旋转后调整的宽度、高度以及新的坐标位置
 */
export const computedRotateLayout = (layout: Layout): Layout => {
  // 复制原始布局信息，以创建一个新的布局对象，避免修改原始布局
  let newLayout = { ...layout } as Layout;
  // 解构原始布局信息，获取宽度、高度、旋转角度和坐标位置
  const { width, height, rotate, x, y } = layout;

  // 计算旋转后的宽度，使用三角函数来确定旋转后的尺寸
  const newWidth = Math.round(
    width * Math.cos((rotate * Math.PI) / 180) + height * Math.sin((rotate * Math.PI) / 180),
  );

  // 根据旋转后的宽度计算新的x轴坐标，以保持元素居中
  const newX = Math.round(x + (width - newWidth) / 2);
  // 将计算出的新x轴坐标和宽度保存到新的布局对象中
  newLayout.rotateX = newX;
  newLayout.rotateWidth = newWidth;

  // 计算旋转后的高度，同样使用三角函数来确定旋转后的尺寸
  const newHeight = Math.round(
    height * Math.cos((rotate * Math.PI) / 180) + width * Math.sin((rotate * Math.PI) / 180),
  );

  // 根据旋转后的高度计算新的y轴坐标，以保持元素居中
  const newY = Math.round(y + (height - newHeight) / 2);
  // 将计算出的新y轴坐标和高度保存到新的布局对象中
  newLayout.rotateY = newY;
  newLayout.rotateHeight = newHeight;

  // 返回新的布局对象，包含旋转后的布局信息
  return newLayout;
};
export const computedGroupLayout = (nodes: ComponentTree): Layout => {
  let layout = {} as Layout;
  const layouts = nodes.map((item: Node) => {
    let layout = { ...item.layout } as {
      [key: string]: number;
    };
    if (typeof layout.rotate === 'number' && layout.rotate !== 0) {
      const { width, height, rotate, x, y } = layout;
      const newWidth =
        width * Math.cos((rotate * Math.PI) / 180) + height * Math.sin((rotate * Math.PI) / 180);
      const newX = Math.round(x + (width - newWidth) / 2);
      layout.x = newX;
      layout.width = newWidth;
      const newHeight =
        height * Math.cos((rotate * Math.PI) / 180) + width * Math.sin((rotate * Math.PI) / 180);
      const newY = Math.round(y + (height - newHeight) / 2);
      layout.y = newY;
      layout.height = newHeight;
    }
    return layout;
  });
  const x = Math.min(
    ...layouts.map((item) => {
      return item.x;
    }),
  );
  const y = Math.min(
    ...layouts.map((item) => {
      return item.y;
    }),
  );
  const maxWidthLayout = layouts.reduce((prev, curr) => {
    return prev.x + prev.width > curr.x + curr.width ? prev : curr;
  });
  const maxHeightLayout = layouts.reduce((prev, curr) => {
    return prev.y + prev.height > curr.y + curr.height ? prev : curr;
  });
  // console.log('layouts', layouts);
  // console.log('x', x, 'y', y);
  // console.log('maxWidth', maxWidthLayout, 'maxHeight', maxHeightLayout);
  const width = maxWidthLayout.x + maxWidthLayout.width - x;
  const height = maxHeightLayout.y + maxHeightLayout.height - y;
  layout.x = x;
  layout.y = y;
  layout.width = width;
  layout.height = height;
  layout.zIndex = Math.max(...nodes.map((node: Node) => node.layout.zIndex as number)) + 1;
  return layout;
};
